<template>

  <div class="root">
    <div class="head">
      <div style="width: 48px;height: 48px;margin-left: 10px;"></div>
      <h2 class="home-tital" >中药大全</h2>
      <img class="to-add-medicine" src="http://sn4w25xpy.hd-bkt.clouddn.com/172525_plus_icon.png" @click="toAddMedicine()"/>
    </div>
    <div class="content">
      <div style="height: 75px;"></div>
      <MedicineCard v-for="medicineItem in medicineList" :medicine-info="medicineItem" @click="getMedicineDetail(medicineItem.id)"/>
<!--      <div class="mdc-card" v-for="medicineItem in medicineList"  @click="getMedicineDetail(medicineItem.id)">
        <img class="mdc-img" :src="medicineItem.image_url">
        <div style="width: 22px;"></div>
        <div class="mdc-title">
          <div class="mdc-name">{{ medicineItem.medicine_name }}</div>
          <div style="height: 8px;"></div>
          <div class="mdc-description">{{ medicineItem.description }}</div>
        </div>
      </div>-->  
    </div>
    <div calss="loading">{{ loadStatus }}</div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import MedicineCard from './MedicineCard.vue';
import { MedicineInfo } from '../types.ts';

//获取点击的id并跳转
const router = useRouter();
const getMedicineDetail = (medicineId:number)=>{
  console.log(medicineId);
  //疑问🤔：这里是否需要加入生命周期函数
  router.push(`medicineDetail/id=${medicineId}`)
  
}


// 定义 中药 类型
//interface Medicine {
//  id: number;
//  medicine_name: string;
//  image_url: string;
//  description: string;
//}

// 中药数组
/// 使用 typescript 一定要声明对类型
/// 这里的「medicineList」是一个 array<Medicine> 类型
/// 也就是说 medicineList 是一个 <中药> 类型的数组
/// 这个数组中的所有元素 必须是 Medicine 类型
//let medicineList = ref<Medicine[]>([])
let medicineList = ref<MedicineInfo[]>([])
const page = ref(2);//这个变量是用于分页的
onMounted(async () => {
    const response = await fetch('/api/medicine_list?page=1&page_size=10')
    const data = await response.json()
    medicineList.value = data["data"]["list"]
})
// //从后端引入数据
// fetch('/api/medicine_list?page=1&page_size=10')
//   .then(response => response.json())
//   .then(data => {
//     medicineList.value = data.data.list
//   })
//   .catch(error => {
//     console.error('Error fetching data:', error);
//   });

//触底加载下一页
let loadStatus = ref()
const isLoading = ref(false)
onMounted(() => {
    window.addEventListener('scroll', handleScroll);
});

const handleScroll = () => {
    const viewportHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;
    const scrollTop = window.pageYOffset;
    // 判断是否滚动到底部
    if (scrollTop + viewportHeight >= documentHeight &&!isLoading.value  ) {
      isLoading.value = true
      console.log('检测到触底');
      updateData()
    }
};
//请求下一页数据
const updateData = async () => {
    const response = await fetch(`/api/medicine_list?page=${page.value}&page_size=10`);
    console.log(page.value);
    const data = await response.json()
    const list = data["data"]["list"];
    console.log(list);
    isLoading.value = false;
    if(Array.isArray(list) && list.length > 0){
    // 将新数据合并到已有的数据列表中
    medicineList.value = [...medicineList.value,...data["data"]["list"]];
    page.value++;
    }else{
      console.log('没有了');
      loadStatus.value = '没有了'
      
    }
};
const toAddMedicine = () => {
    router.push('/medicineAdd');
};


</script>

<style scoped lang="scss">
.root {
  max-width: 550px;
  margin: 0 auto;

  .head {
    display: flex;
    justify-content: space-between;
    height: 50px;
    width: 100%;
    align-items: center;
    box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.04);
    background-color: #fff;
    position: fixed;
    max-width: 550px;
  }
  .to-add-medicine{
    width: 36px;
    height: 36px;
    margin-right: 10px;

  }
  .loading{
    font-weight: 300;
    height: 20px;
    width: 60px;
    background-color: #de1d1d;
  }
  .content {
    font-size: 16px;
    font-weight: bold;
    background-color: #F8F9FB;
    color: #000000;


    display: flex;
    flex-direction: column;
    align-items: center;

    .mdc-card {
      background-color: #fff;
      max-width: 500px;
      width: 100%;
      height: 96px;
      border-radius: 12px;
      box-shadow: 2px 2px 15px 1px rgba(0, 0, 0, 0.04);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .mdc-img {
        width: 66px;
        height: 66px;
        margin-left: 14px;
        border-radius: 4px;
      }

      .mdc-title {
        
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .mdc-name {
        font-family: PingFang SC;
        font-size: 16px;
        font-weight: 600;
        line-height: 16px;
        text-align: left;
      }

      .mdc-description {
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        text-align: left;
        padding-right: 14px;

      }

      margin-bottom: 14px;

    }


  }
  


  .home-title {
    align-self: center;
    font-size: 16px;

  }

  h2 {
    align-self: center;
    font-size: 16px;
  }
  
}

</style>
